import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { WingBlank, WhiteSpace, Card, Flex, PullToRefresh, ActivityIndicator } from 'antd-mobile';
import styles from './styles.less';

// 通过dva 中的 connect进行绑定数据
// Route Component 会有额外的 props 用以获取路由信息。 location, params, children

class ScaleRecordListPage extends Component{
  constructor(props) {
    super(props);
    this.state= {
      isLoading: true
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        isLoading: false,
      });
    }, 600);
  }

  componentWillMount(){
      this.forceUpdate();
  } 

  render(){
    const { dispatch, location:{ pathname }, records  } = this.props
    window.scrollTo(0, 0);
    return (
      <WingBlank size="md">
          {this.state.isLoading ?  
          <Flex justify="center" style={{ margin: "50px 0" }} >
                 <ActivityIndicator size="large" animating />
          </Flex> : 
            records&& records.length == 0? 
            <div>
              <Flex justify="center" style={{ margin: "50px 0" }} >
                <img src={require('../../../assets/nodata.png')} /> 
              </Flex> 
              <Flex justify="center" style={{ color: '#aa4929', margin: "50px 0" }} >
                暂无测评纪录
              </Flex> 
            </div>
            :records.map((record, i) =>
            <Link key={i} to={{pathname: `${pathname}/${record.evaUid}`,state: { title: '测评记录', record },}}>
              <WhiteSpace />
              <Card className="record-card">
                <Card.Header
                  title={
                    <div>
                      {record.name}
                      <small>({record.relation})</small>
                    </div>
                  }
                  extra={record.code} />
                <Card.Footer
                  content={[
                    <img src={require('assets/icons/icon-healthy.svg')} key="icon" />,
                    record.title
                  ]}
                  extra={record.createTime} />
              </Card>
            </Link>
          ) 
      } 
        <WhiteSpace />
      </WingBlank>
    );
  }
}

const mapStateToProps = ({ scale, ...rest }) => ({ ...scale, ...rest });

export default connect(mapStateToProps)(ScaleRecordListPage);

